{% extends 'commons/base.html' %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    {% block top_title %}
        <title>美多商城-首页</title>
    {% endblock top_title %}
    {% block top_static %}
        <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
        <script type="text/javascript" src="{{ static('js/jquery-1.12.4.min.js') }}"></script>
        <script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
        <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
    {% endblock top_static %}
</head>
<body>
<div id="app">
    {% block body_content %}
        <div class="navbar_con">
            <div class="navbar">
                <h1 class="fl">商品分类</h1>
                <ul class="sub_menu">
                    {% for group in categories.values() %}
                        <li>
                            <div class="level1">
                                {% for channel in group.channels %}
                                    <a href="{{ channel.url }}">{{ channel.name }}</a>
                                {% endfor %}
                            </div>
                            <div class="level2">
                                {% for cat2 in group.sub_cats %}
                                    <div class="list_group">
                                        <div class="group_name fl">{{ cat2.name }} &gt;</div>
                                        <div class="group_detail fl">
                                            {% for cat3 in cat2.sub_cats %}
                                                <a href="/list/{{ cat3.id }}/1/">{{ cat3.name }}</a>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
                <ul class="navlist fl">
                    <li><a href="">首页</a></li>
                    <li class="interval">|</li>
                    <li><a href="">真划算</a></li>
                    <li class="interval">|</li>
                    <li><a href="">抽奖</a></li>
                </ul>
            </div>
        </div>
        <div class="pos_center_con clearfix">
            <ul class="slide">
                {% for content in contents.index_lbt %}
                    <li><a href="{{ content.url }}"><img src="{{ content.image.url }}" alt="幻灯片01"></a></li>
                {% endfor %}
            </ul>
            <div class="prev"></div>
            <div class="next"></div>
            <ul class="points"></ul>
            <div class="news">
                <div class="news_title">
                    <h3>快讯</h3>
                    <a href="#">更多 &gt;</a>
                </div>
                <ul class="news_list">
                    {% for content in contents.index_kx %}
                        <li><a href="{{ content.url }}">{{ content.title }}</a></li>
                    {% endfor %}
                </ul>
                {% for content in contents.index_ytgg %}
                    <a href="{{ content.url }}" class="advs"><img src="{{ content.image.url }}"></a>
                {% endfor %}
            </div>
        </div>
        <div class="floor_adv" v-cloak>
            <div class="list_model">
                <div class="list_title clearfix">
                    <h3 class="fl" id="model01">1F 手机通讯</h3>
                    <div class="subtitle fr">
                        <a @mouseenter="f1_tab=1" :class="f1_tab===1?'active':''">时尚新品</a>
                        <a @mouseenter="f1_tab=2" :class="f1_tab===2?'active':''">畅想低价</a>
                        <a @mouseenter="f1_tab=3" :class="f1_tab===3?'active':''">手机配件</a>
                    </div>
                </div>
                <div class="goods_con clearfix">
                    <div class="goods_banner fl">
                        <img src="{{ contents.index_1f_logo.0.image.url }}">
                        <div class="channel">
                            {% for content in contents.index_1f_pd %}
                                <a href="{{ content.url }}">{{ content.title }}</a>
                            {% endfor %}
                        </div>
                        <div class="key_words">
                            {% for content in contents.index_1f_bq %}
                                <a href="{{ content.url }}">{{ content.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="goods_list_con">
                        <ul v-show="f1_tab===1" class="goods_list fl">
                            {% for content in contents.index_1f_ssxp %}
                                <li>
                                    <a href="{{ content.url }}" class="goods_pic"><img
                                            src="{{ content.image.url }}"></a>
                                    <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a>
                                    </h4>
                                    <div class="price">{{ content.text }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                        <ul v-show="f1_tab===2" class="goods_list fl">
                            {% for content in contents.index_1f_cxdj %}
                                <li>
                                    <a href="{{ content.url }}" class="goods_pic"><img
                                            src="{{ content.image.url }}"></a>
                                    <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a>
                                    </h4>
                                    <div class="price">{{ content.text }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                        <ul v-show="f1_tab===3" class="goods_list fl">
                            {% for content in contents.index_1f_sjpj %}
                                <li>
                                    <a href="{{ content.url }}" class="goods_pic"><img
                                            src="{{ content.image.url }}"></a>
                                    <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a>
                                    </h4>
                                    <div class="price">{{ content.text }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list_model model02">
                <div class="list_title clearfix">
                    <h3 class="fl" id="model01">2F 电脑数码</h3>
                    <div class="subtitle fr">
                        <a @mouseenter="f2_tab=1" :class="f2_tab===1?'active':''">加价换购</a>
                        <a @mouseenter="f2_tab=2" :class="f2_tab===2?'active':''">畅享低价</a>
                    </div>
                </div>
                <div class="goods_con clearfix">
                    <div class="goods_banner fl">
                        <img src="{{ contents.index_2f_logo.0.image.url }}">
                        <div class="channel">
                            {% for content in contents.index_2f_pd %}
                                <a href="{{ content.url }}">{{ content.title }}</a>
                            {% endfor %}
                        </div>
                        <div class="key_words">
                            {% for content in contents.index_2f_bq %}
                                <a href="{{ content.url }}">{{ content.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="goods_list_con">
                        <ul v-show="f2_tab===1" class="goods_list fl">
                            {% for content in contents.index_2f_cxdj %}
                                <li>
                                    <a href="{{ content.url }}" class="goods_pic"><img
                                            src="{{ content.image.url }}"></a>
                                    <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a>
                                    </h4>
                                    <div class="price">{{ content.text }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                        <ul v-show="f2_tab===2" class="goods_list fl">
                            {% for content in contents.index_2f_jjhg %}
                                <li>
                                    <a href="{{ content.url }}" class="goods_pic"><img
                                            src="{{ content.image.url }}"></a>
                                    <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a>
                                    </h4>
                                    <div class="price">{{ content.text }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list_model model03">
                <div class="list_title clearfix">
                    <h3 class="fl" id="model01">3F 家居家装</h3>
                    <div class="subtitle fr">
                        <a @mouseenter="f3_tab=1" :class="f3_tab===1?'active':''">生活用品</a>
                        <a @mouseenter="f3_tab=2" :class="f3_tab===2?'active':''">厨房用品</a>
                    </div>
                </div>
                <div class="goods_con clearfix">
                    <div class="goods_banner fl">
                        <img src="{{ contents.index_3f_logo.0.image.url }}">
                        <div class="channel">
                            {% for content in contents.index_3f_pd %}
                                <a href="{{ content.url }}">{{ content.title }}</a>
                            {% endfor %}
                        </div>
                        <div class="key_words">
                            {% for content in contents.index_3f_bq %}
                                <a href="{{ content.url }}">{{ content.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="goods_list_con">
                        <ul v-show="f3_tab===1" class="goods_list fl">
                            {% for content in contents.index_3f_shyp %}
                                <li>
                                    <a href="{{ content.url }}" class="goods_pic"><img
                                            src="{{ content.image.url }}"></a>
                                    <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a>
                                    </h4>
                                    <div class="price">{{ content.text }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                        <ul v-show="f3_tab===2" class="goods_list fl">
                            {% for content in contents.index_3f_cfyp %}
                                <li>
                                    <a href="{{ content.url }}" class="goods_pic"><img
                                            src="{{ content.image.url }}"></a>
                                    <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a>
                                    </h4>
                                    <div class="price">{{ content.text }}</div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    {% endblock body_content %}
</div>
{% block bottom_script %}
<script type="text/javascript" src="{{ static('js/common.js') }}"></script>
<script type="text/javascript" src="{{ static('js/slide.js') }}"></script>
<script type="text/javascript" src="{{ static('js/index.js') }}"></script>
{% endblock bottom_script %}
</body>
</html>